HTMLModelElement: environmentMap property

The environmentMap property reflects the environmentmap HTML attribute, and represents the URL of the image file providing the lighting information for a given model, interpreted as an equirectangular projection. When an environment map resource is ready to participate in rendering, the model's environmentMapReady promise is resolved, or is rejected if the resource cannot load or be used.

An equirectangular projection of Earth An equirectangular projection of Earth

The projection of the equirectangular back to a sphere The projection of the equirectangular back to a sphere

If a custom environment map is not set, a generic, User Agent-specified environment map is used.

Usage notes

Note: While environment map resources are provided as images, an appropriate resource should contain a very high dynamic range of luminance values, and may not be appropriate to display directly. While a typical display image may specify a contrast ratio of 3000:1, the contrast ratio for an environment map image may be 100,000:1 or greater.

Examples

This example demonstrates how to specify a custom environment map, both in JavaScript and directly in HTML:

html
<model
  environmentMap="grassland.exr"
  style="background-color:#ff8080;"
  alt="a teapot in a sunny grassland">
  <source src="teapot.glb" type="model/gltf+binary" />
  <source src="teapot.usdz" type="model/vnd.usdz+zip" />
</model>
<button onclick="goToTundra()"></button>
js
const modelElem = document.querySelector("model");

async function goToTundra() {
  modelElem.alt = "a teapot in a frozen tundra";
  modelElem.environmentMap = "tundra.exr";
  await modelElem.environmentMapReady;
  modelElem.style.backgroundColor = "#8080ff";
}

In this example, the teapot model is initially presented in an environment that reflects a warm, grassy landscape. Note that while the background color is not directly changed, it is often appropriate to update the background color in conjunction with a change to the environmentMap.

Specifications

No specification found

No specification data found for api.HTMLModelElement.environmentMap.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

See also